<template>
  <div>
    <div ref="chart" style="width: 100px; height: 150px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          text: '异常占比',
          textStyle: {
            color: '#ffffff', // 修改标题文本颜色为白色
            fontSize: 14
          },
          subtext: '0.1',
          subtextStyle: {
            color: '#ffffff', // 修改副标题文本颜色为白色
            fontSize: 30,
            fontWeight: 700
          },
          itemGap: 15,
          left: 'center',
          top: '43%'
        },
        angleAxis: {
          max: 100,
          clockwise: false,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          splitLine: { show: false }
        },
        radiusAxis: {
          type: 'category',
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          splitLine: { show: false }
        },
        polar: {
          center: ['50%', '50%'],
          radius: ['60%', '100%']
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                name: '作文得分',
                value: 90,
                itemStyle: { normal: { color: 'rgba(255, 255, 255, 0.9)' } } // 占比部分白色但略暗
              }
            ],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 25,
            barGap: '-100%',
            z: 2
          },
          {
            type: 'bar',
            data: [
              {
                value: 100,
                itemStyle: {
                  color: 'rgba(255, 255, 255, 0.7)', // 其他部分稍微暗一点
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 5,
                  shadowOffsetY: 2
                }
              }
            ],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 25,
            barGap: '-100%',
            z: 1
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>
